<template>
	<view class="service_main">
		<view class="service_time">
			<text style="font-size: 28rpx;font-weight: 28rpx;color: #FFFFFF;">2020/6/29 9:18</text>
		</view>
		<view class="send">
			<input type="text" @click="send()" value="" />
			<view class="logo"  v-show="see">
				<text>+</text>
			</view>
			<view class="word" v-show="!see" @click="send()">
				<text style="color: #FFFFFF;font-size: 34rpx;font-weight: bold;">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				see:true,
			}
		},
		
		methods:{
			send(){
				this.see=!this.see;
			}
		}
	}
</script>

<style>
	.service_main{
		width: 100%;
		height: 100vh;
		background-color: #F1F1F1;
		padding-top: 40rpx;
	}
	
	.service_time{
		width: 250rpx;
		height: 40rpx;
		background-color:#CCCCCC ;
		border-radius: 20rpx;
		margin:0 250rpx;
		text-align: center;
	}
	
	.send{
		width:710rpx;
		height: 80rpx;
		padding: 20rpx;
		background-color: #E1E1E1;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
	}
	
	.send input{
		width: 610rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		border:1px solid #E1E1E1 ;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}
	
	.send .logo{
		width: 80rpx;
		height: 80rpx;
		background-color:#FCC100 ;
		border-radius: 50%;
		text-align: center;
		line-height: 68rpx;
	} 
	
	.send .logo text{
		color: #FFFFFF;
		font-size: 115rpx;
	}
	
	.send .word{
		width: 120rpx;
		height: 80rpx;
		background-color:#FCC100 ;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	

</style>